<!--
 * @Description: 个人信息页面
 * @Author: yyh
 * @Date: 2021-07-02 08:44:01
 * @LastEditors: yyh
 * @LastEditTime: 2021-07-02 19:05:40
-->
<template>
  <div class="authentication_details">
      <div class="bg-header">
        <van-icon class="icon" name="arrow-left" size="20px" @click="back"/>
          <!-- <van-nav-bar
          left-arrow
          @click-left="back"
          border:false
        /> -->
      <div class="userInfo">
        <div class="userface">
          <img :src="form.userFace" alt="">
        </div>
          <p class="p1">{{form.username}}</p>
          <p class="p2">易洁家政在手，家中干净我有</p>
          <p class="p3" :type="form.certificationStatus===''?'未通过验证':'已实名认证'">{{form.certificationStatus}}</p>
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="details">
      <p>手机号：{{form.telephone}}</p>
      <p>身份证号：{{form.idCard}}</p>
      <p>银行卡号：{{form.bankCard}}</p>
      <div>
      <p>身份证正面照</p>
      <img :src="form.idcardPhotoPositive" alt="" width="300px" height="200px">
    </div>
    <div>
      <p>身份证背面照</p>
      <img :src="form.idcardPhotoNegative" alt="" width="300px" height="200px">
    </div>
    <div>
      <p>银行卡照片</p>
      <img :src="form.bankCardPhoto" alt="" width="300px" height="200px">
    </div>
    </div>
  </div>

</template>

<script>
import {findUserDetailsById} from "@/api/authentication_details"

  export default {
    data () {
      return {
        form:{}
      }
    },
    computed: {},
    methods: {
      // 返回到我的页面
      back(){
        this.$router.push({
          path:"/mine"
        })
      },
      //获取当前用户信息
      async userData() {
        //处理数据
        let temp = {
          id: this.$route.query.id
        }
        let res = await findUserDetailsById(temp);
        this.form = res.data;
      },
      //返回到我的页面
      back(){
      this.$router.push({
        path:"/mine"
      })
    },
    },
    created () {
    this.userData();
    },
    mounted () {},
  }
</script>
<style lang="less" scoped >
  @bgcolor: rgb(163, 0, 254);
  .bg-header {
    //相对定位
    position: relative;
    width: 100%;
    height: 200px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    //渐变
    background-image: linear-gradient(
      to bottom,
      hsl(329.88, 100%, 50%) 0%,
      hsl(329.2, 100%, 49.81%) 8.1%,
      hsl(327.31, 100%, 49.27%) 15.5%,
      hsl(324.42, 100%, 48.42%) 22.5%,
      hsl(320.75, 100%, 47.31%) 29%,
      hsl(316.42, 100%, 45.97%) 35.3%,
      hsl(311.55, 100%, 44.44%) 41.2%,
      hsl(306.18, 100%, 42.77%) 47.1%,
      hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
    );
    //返回图标
    .icon{
      margin-top: 1em;
      margin-left: 1em;
      color:  #333333
    }
    // 用户信息
    .userInfo {
      // 绝对定位
      position: absolute;
      left: 50%;
      right: 50%;
      width: 350px;
      height: 200px;
      margin-left: -175px;
      margin-top: 50px;
      text-align: center;
      // border: 1px solid white;
      background: rgba(245, 246, 250, 0.4);
      box-shadow: 0 10px 5px 0px #dcdde1;
      border-radius: 5px;
      // 用户头像
      .userface {
        // position: absolute;
        margin: -65px auto;
        width: 100px;
        height: 100px;
      }
      img{
        margin-top: 20%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .p1{
        margin-top: 5.5em;
      }
      .p2{
        font-size: 14px;
      }
      .p3{
        color: red;
      }
    }
  }
  .details{
    margin-top: 9em;
    font-size: 14px;
    text-align: center;
  }
  // @keyframes scool {
  //   0% {
  //   }
  //   100% {
  //     transform: rotate(360deg);
  //   }
  // }
</style>